<template>
  <div>子级组件</div>
  <h2>mainStore:{{ mainStore }}</h2>
  <h2>id:{{ mainStore.id }}</h2>
  <h2>name:{{ mainStore.name }}</h2>
  <h2>count:{{ mainStore.count }}</h2>
  <h2>nameLength:{{ mainStore.nameLength }}</h2>
  <h2 v-if="mainStore.data.data">data:{{ mainStore.data.data.address }}</h2>
  <button @click="reset">重置</button>
  <button @click="btn">触发</button>
  <Child/>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import Child from "@/components/child.vue";
import {useMainStore} from "@/store/main";
import {mapActions} from "pinia";

export default defineComponent({
  name: 'App',
  components: {
    Child
  },
  setup() {
    const mainStore = useMainStore();
    mainStore.getRequestData()
    setInterval(() => {
      mainStore.count++;
    }, 2000)

    const reset = () => {
      mainStore.$reset()
    }
    // const btn = () => {
    //   // mainStore.insertRequest()
    //   // mainStore.randomizeCounter()
    // }
    return {
      mainStore, reset,
      // btn
    }
  },
  methods: {
    ...mapActions(useMainStore, ['increment']),
    btn() {
      this.increment()
    }
  }
});
</script>

<style>

</style>
